<template>
  <div id="app">
    <div v-if="$router.currentRoute.meta.keepAlive">
      <!-- 头部 -->
      <topNav @shrink="shrink"></topNav>
      <!-- 主体 -->
      <main>
        <!-- 左侧导航 -->
        <div class="left-nav">
          <leftNav ref="isCollapse"></leftNav>
        </div>
        <!-- 页面内容 -->
        <div class="right-main">
          <!-- 头部导航 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" style="background-color: white;">
            <el-breadcrumb-item
              v-for="(item, index) in $router.currentRoute.matched"
              v-bind:key="index"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>

          <transition name="fade" mode="out-in">
            <!-- 路由页面 -->
            <router-view />
          </transition>
        </div>
      </main>
    </div>
    <!-- 登录页不需要展示左侧菜单 -->
    <div v-else>
      <!-- 路由页面 -->
      <router-view />
    </div>
  </div>
</template>
<script>
// 左侧导航
import leftNav from "./nav/left-nav";
// 头部导航
import topNav from "./nav/top-nav";
export default {
  components: {
    leftNav,
    topNav,
  },
  data() {
    return {};
  },
  methods: {
    // 接收头部传递过来是否展开或缩进
    shrink(status) {
      let leftNav = document.querySelector(".left-nav");
      let rightDiv = document.querySelector(".right-main");
      if (status === "indent") {
        leftNav.style.width = "0%";
        rightDiv.style.left = "0%";
        rightDiv.style.width = "100%";
        this.$refs.isCollapse.changeCollapse(false);
      } else {
        leftNav.style.width = "12%";
        rightDiv.style.left = "12%";
        rightDiv.style.width = "88%";
        this.$refs.isCollapse.changeCollapse(true);
      }
    },
  },
};
</script>

<style>
@import url("./lib/maincss/maincss.css");
.fade-enter-active, .fade-leave-active {
  transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity:0;
}
</style>
